{extend name="extra@index/base" /}
{block name="title"}我的订单{/block}

{block name="css"}

{/block}


{block name='page'}
<style>/**页面css写在这里*/
.item-title {
    font-size: 1.2rem;
}

.content-block {
    margin: 0;
    padding: 0;
    color: #6d6d72;
}

.link {
    float: right;
    border: 1px solid #96dd3b;
    color: #96dd3b;
}

.state {
    float: right;
    color: blue;
}

.bar-nav {
    background: #09F;
}

.item-title, .state {
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.address-tips {
    margin-top: 20px;
    text-align: center;
    font-size: 1rem;
    margin-top: 5px;
}
</style>
<!-- 页面开始 -->
<header class="bar bar-nav">
    <h1 class='title' style="color: white">我的订单</h1>
</header>
<div class="content" id="vue">
    <div class="buttons-tab">
        <a href="#tab1" class="tab-link active button" onclick="load('all')">全部</a>
        <a href="#tab2" class="tab-link button" onclick="load(0)">待付款</a>
        <a href="#tab3" class="tab-link button" onclick="load(3)">待发货</a>
    </div>
    <div class="tabs">
        <div id="tab1" class="tab active">
            {php}
            $user = session('user');
            if($user['id']){
            {/php}
            <div class="card">
                <div class="card-content">
                    <div class="list-block media-list">
                        <ul>
                            <li class="item-content" v-for="li in tab1_list" @click="goto(li.Id)">
                                <div class="item-media">
                                    <img :src="[li.shop.Cover?li.shop.Cover:'/static/img/shop.png']" width="44">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title"><b>{{li.shop.ShopName}}</b></div>
                                        <p class="state">{{li.Status}}</p>
                                    </div>
                                    <div class="item-subtitle">下单时间:{{li.CreateTime}}</div>
                                    <div class="item-subtitle">￥{{li.cost}}</div>
                                    <div class="link">再来一单</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {php}
            }else{
            {/php}
            <div class="content-block">
                <div class="address-tips"><p>登录后查看订单信息！</p></div>
            </div>
            {php}
            }
            {/php}

        </div>
        <div id="tab2" class="tab">
            {php}
            $user = session('user');
            if($user['id']){
            {/php}
            <div class="card">
                <div class="card-content">
                    <div class="list-block media-list">
                        <ul>
                            <li class="item-content" v-for="li in tab2_list">
                                <div class="item-media">
                                    <img :src="[li.shop.Cover?li.shop.Cover:'/static/img/shop.png']" width="44">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title"><b>{{li.ShopName}}</b></div>
                                        <p class="state">{{li.Status}}</p>
                                    </div>
                                    <div class="item-subtitle">下单时间:{{li.CreateTime}}</div>
                                    <div class="item-subtitle">￥{{li.cost}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {php}}else{{/php}
            <div class="content-block">
                <div class="address-tips"><p>登录后查看订单信息！</p></div>
            </div>
            {php}}{/php}
        </div>
        <div id="tab3" class="tab">
            {php}
            $user = session('user');
            if($user['id']){
            {/php}
            <div class="card">
                <div class="card-content">
                    <div class="list-block media-list">
                        <ul>
                            <li class="item-content" v-for="li in tab3_list">
                                <div class="item-media">
                                    <img :src="[li.shop.Cover?li.shop.Cover:'/static/img/shop.png']" width="44">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title"><b>{{li.ShopName}}</b></div>
                                        <p class="state">{{li.Status}}</p>
                                    </div>
                                    <div class="item-subtitle">下单时间:{{li.CreateTime}}</div>
                                    <div class="item-subtitle">￥{{li.cost}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>


            {php}}else{{/php}
            <div class="content-block">
                <div class="address-tips"><p>登录后查看订单信息！</p></div>
            </div>
            {php}}{/php}
        </div>
    </div>
</div>

<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
    <div class="preloader"></div>
</div>


<script>
    var page = new Vue({
        el: '#vue',
        data: function () {
            return {
                nav: '{php}echo request()->module(){/php}',
                tab1_list: [],
                tab2_list: [],
                tab3_list: []
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                load('all');
            })
        },
        methods: {
            goto: function (id) {
                $.router.load('/order/index/orderPage/?id=' + id, true);
            }
        }

    })


    function load(type) {

        $.showPreloader()

        $.get('/api/Order/index', {type: type}, function (data) {
            $.hidePreloader()

            if (data.length > 0) {


                for (var i = 0; i < data.length; i++) {
                    data[i].cost = parseFloat(data[i].Fee) + parseFloat(data[i].ShipFee);
                    for (var j = 0; j < data[i].order_goods.length; j++) {
                        data[i].cost += parseFloat(data[i].order_goods[j].Price * data[i].order_goods[j].Number);
                    }
                }

                switch (type) {
                    case 'all':
                        page.tab1_list = data;
                        break;
                    case 0:
                        page.tab2_list = data;
                        break;
                    case 3:
                        page.tab3_list = data;
                        break;
                }
            }
        });
    }


</script>


<!-- 页面结束 -->
{/block}

{block name="base"}

{/block}

{block name="js"}

{/block}